//代码分割：相当于路由的懒加载
//需要插件：
  //@babel/plugin-syntax-dynamic-import支持写法
  //@loadable/component 动态导入组件

  import React from 'react'

  import loadable from '@loadable/component'

  const TestHooks = loadable(() => import('./study/TestHooks'))

  const TestHoc = loadable(() => import('./study/TestHoc'))

  const TestRouter = loadable(() => import('./router/TestRouter'))

  const ShopDetail =loadable(() => import('./router/children/ShopDetail'))

  const Echarts = loadable(() => import('./echarts/Histogram'))
  
  const TodoList = loadable(() => import('./todoList'))

  // const Recommon = loadable(() => import('./recommon/Recommon'))

  const Mobx = loadable(() => import('./store/Mobx'))

  import {
    PartitionOutlined,
    SyncOutlined,
    PieChartOutlined,
    HeartTwoTone
  } from '@ant-design/icons'

  import Layout from './layout/index'
  export default [
    {
      id: 1,
      title: '组件的使用',
      icon: <PartitionOutlined />,
      children: [
        {
          id: 101,
          title: 'hooks的使用',
          path: '/hooks',
          component: TestHooks 
        },
        {
          id: 102,
          title: 'hoc的使用',
          path: '/hoc',
          component: TestHoc 
        },
        {
          id: 103,
          title: 'todolist',
          path: '/todo',
          component: TodoList
        }
      ]
    },
    {
      id: 2,
      title: '路由',
      icon:  <SyncOutlined spin />,
      children: [
        {
          id: 201,
          title: 'React Router',
          path: '/router',
          component: TestRouter 
        },
        {
          id: 202,
          title: '详情页',
          path: '/detail',
          component: ShopDetail,
          hidden: true
        }
      ]
    },
    {
      id: 3,
      title: 'Echarts图表',
      icon:  <PieChartOutlined />,
      children: [
        {
          id: 301,
          title: '统计图',
          path: '/echart',
          component: Echarts 
        },
      ]
    },
    {
      id: 4,
      title: '状态管理',
      icon:   <HeartTwoTone twoToneColor="#eb2f96" />,
      children: [
        {
          id: 401,
          title: 'Mobx',
          path: '/mobx',
          component: Mobx 
        },
      ]
    }
  ]
  export {
    Layout
  }